<template>
  <div class="AppHander">
    <div class="handerTop">
      <div class="topText">
        <div class="leftLogin">
          <router-link to="/home"
            ><i class="el-icon-s-home">回到首页 </i></router-link
          >
          <div v-if="phone">
            <a href="javascript:;" class="phone">欢迎登录,{{ phone }}</a>
            <a href="javascript:;" @click="romoveToken">退出登录</a>
          </div>
          <div v-else>
            <router-link to="/login"><span>您好,请登录 </span></router-link>
            <router-link to="/register">免费注册</router-link>
          </div>
        </div>
        <div class="right">
          <router-link to="/shoppingCar"><i class="el-icon-shopping-cart-full">我的购物车</i></router-link>
          <a  href="javascript:;"><i class="el-icon-tickets">我的订单</i></a>
          <a  href="javascript:;"><i class="el-icon-s-custom">客户服务</i></a>
          <a  href="javascript:;"><i class="el-icon-s-check">商城会员</i></a>
          <a  href="javascript:;"><i class="el-icon-s-order">企业采购</i></a>
          <a  href="javascript:;"><i class="el-icon-mobile">手机商城</i></a>
          <a href="javascript:;" ><i class="el-icon-chat-dot-square">反馈投诉</i></a>
        </div>
      </div>
    </div>
    <div class="handerBottom">
      <div class="logo"><router-link to="/home"></router-link></div>
      <div class="search">
        <input
          type="text"
          placeholder="请输入要搜索的内容！"
          v-model="searchKey"
        />
        <el-button type="danger " @click="goSearch">搜索</el-button>
      </div>
      <div class="user"></div>
    </div>
    <div
      class="handerNav"
      v-show="
        $route.path == '/home' ||
        $route.path == '/search' ||
        $route.name === 'detail'
      "
    >
      <ul>
        <li>
          <a @mouseenter="trueShow" @mouseleave="falseShow">商品类目大全</a>
        </li>
        <li><a href="">优惠券</a></li>
        <li><a href="">拍卖</a></li>
        <li><a href="">家电</a></li>
        <li><a href="">京东超市</a></li>
      </ul>
    </div>
    <transition>
      <LeftNav
        v-show="isShow"
        @mouseleave.native="falseShow"
        @mouseenter.native="trueShow"
      ></LeftNav>
    </transition>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data () {
    return {
      searchKey: '',
      isShow: false
    }
  },
  computed: {
    ...mapState('homeAbout', ['phone'])
  },

  methods: {
    // 移除token
    romoveToken () {
      localStorage.removeItem('token')
      this.$store.commit('homeAbout/removePhone')
      this.$router.push({ path: '/home' })
    },
    // input框跳转Search路由处理函数
    goSearch () {
      if (this.$route.path === '/home') {
        this.$router.push({
          name: 'search',
          query: {
            searchKey: this.searchKey
          }
        })
      } else {
        this.$bus.$emit('getSearchKey', this.searchKey)
      }
      this.searchKey = ''
    },
    // 鼠标放入显示菜单
    trueShow () {
      if (this.$route.path !== '/home') {
        this.isShow = true
      }
    },
    falseShow () {
      if (this.$route.path !== '/home') {
        this.isShow = false
      }
    }
  },
  mounted () {
    this.$store.dispatch('homeAbout/getSelf')
    // 判断是否为首页，如果在首页 菜单显示 在其他页面 菜单消失
    if (this.$route.path !== '/home') {
      this.isShow = false
    } else {
      this.isShow = true
    }
    if (this.$route.path === '/login') {
    }
    // 接受来自Hander的isShow指令
    this.$bus.$on('getShow', (val) => {
      this.isShow = val
    })
  },
  updated () {
    if (this.$route.name === 'home') {
      this.$store.dispatch('homeAbout/getSelf')
    }
  }
}
</script>

<style scoped lang="less">
.v-enter,
.v-leave-to {
  opacity: 0;
}
.v-enter-active {
  transition: 0.3s all;
}
.v-leave-active {
  transition: 0.1s all;
}
.v-enter-to,
.v-leave {
  opacity: 1;
}
/* Hander区 */
.AppHander {
  width: 1349px;
  .handerTop {
    height: 30px;
    background-color: #e3e4e5;
    .topText {
      .right{
        height: 100%;
        display: flex;
        align-items: center;
          a{
            padding: 0 5px;
            display: inline-block;
            border-right: 1px solid rgb(185, 185, 185);
            &:nth-child(7){
              border: none;
            }
          }
        }
      font-size: 13px;
      width: 1200px;
      height: 30px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      // background-color: pink;
      a {
        color: #999 !important;
      }
      a:hover {
        color: #f30213 !important;
      }
      .leftLogin {
        .phone {
          margin-right: 10px;
        }
        .phone:hover {
          color: #999 !important;
        }

        i {
          margin-right: 10px;
        }
        span {
          margin-left: 10px;
        }
        div {
          display: inline;
        }

      }
    }
  }
  .handerBottom {
    width: 100%;
    display: flex;
    justify-content: space-around;
    margin: 0 auto;
    align-items: center;
    height: 120px;
    // border: 1px solid #ccc;
    background-color: #fff;
  }
  .handerNav {
    width: 100%;
    height: 50px;
    border-bottom: 3px solid #f56c6c;
    background-color: #fff;
    ul {
      display: inline-block;
      margin-left: 75px;
      & li:nth-child(n + 2) a:hover {
        color: #f62829;
      }
      li {
        display: inline-block;
        line-height: 50px;
        text-align: center;
        &:nth-child(1) a {
          background-color: #f62829;
          width: 190px;
        }
        a {
          display: block;
          padding: 0px 10px;
        }
      }
    }
  }
}
/* logo区 */
.logo {
  a {
    display: block;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: url('./img/logo.jpg') no-repeat center;
    background-size: 100% 100%;
  }
}
.search {
  display: flex;
  width: 480px;
  height: 45px;
  input {
    height: 40px;
    width: 400px;
    outline: none;
    border: 1px solid #e52121;
    font-size: 20px;
  }
  button {
    height: 44px;
    border-radius: 0 !important;
    background-color: #e12418;
    border-color: #e12418;
    &:hover {
      background-color: #c80606;
      border-color: #c80606;
    }
  }
}
</style>
